<template>
  <div class="g-ft">
    <div class="m-ft clearfix">
      <div class="copy s-fc3">
        <p>
          <a href="//st.music.163.com/official-terms/service" class="s-fc4">服务条款</a>
          <span class="line">|</span>
          <a href="//st.music.163.com/official-terms/privacy" class="s-fc4">隐私政策</a>
          <span class="line">|</span>
          <a href="//st.music.163.com/official-terms/children" class="s-fc4"
            >儿童隐私政策</a
          >
          <span class="line">|</span>
          <a href="//music.163.com/st/staticdeal/complaints.html" class="s-fc4"
            >版权投诉指引</a
          >
          <span class="line">|</span>
          <a href="//st.music.163.com/official-terms/service" class="s-fc4">意见反馈</a>
          <span class="line">|</span>
          <a href="mailto:yyyx@list.nie.netease.com" class="s-fc4">广告合作</a>
        </p>
        <p>
          <span class="sep">网易公司版权所有©1997-2021</span>
          <span>杭州乐读科技有限公司运营：</span>
          <a
            href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/8282703158/452a/ca0c/3a10/caad83bc8ffaa850a9dc1613d74824fc.png"
            class="s-fc3"
            >浙网文[2021] 1186-054号</a
          >
        </p>
        <p>
          <span class="sep">违法和不良信息举报电话：0571-89853516</span>
          <span>举报邮箱：</span>
          <a href="mailto:ncm5990@163.com">ncm5990@163.com</a>
        </p>
        <p>
          <a href="https://beian.miit.gov.cn/#/Integrated/index" class="s-fc3"
            >粤B2-20090191-18 工业和信息化部备案管理系统网站</a
          >
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010902002564"
          >
            <span class="p-logo"></span>
            <span class="p-text">浙公网安备 33010902002564号</span>
          </a>
        </p>
      </div>
      <ul class="enter clearfix">
        <li class="unit">
          <a href="https://web-amped.music.163.com/" class="logo logo-bg"></a>
          <span class="tt"></span>
        </li>
        <li class="unit mg">
          <a href="//music.163.com/st/userbasic#/auth" class="logo1"></a>
          <span class="tt1"></span>
        </li>
        <li class="unit mg">
          <a href="//music.163.com/musician/artist" class="logo2"></a>
          <span class="tt2"></span>
        </li>
        <li class="unit mg">
          <a href="//music.163.com/web/reward" class="logo3"></a>
          <span class="tt3"></span>
        </li>
        <li class="unit mg">
          <a href="javascript:;" class="logo4"></a>
          <span class="tt4"></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Copyright",
};
</script>

<style lang="less" scoped>
.g-ft {
  position: relative;
  height: 172px;
  overflow: hidden;
  border-top: 1px solid #d3d3d3;
  background: #f2f2f2;
}
.m-ft {
  width: 980px;
  margin: 0 auto;
  .copy {
    float: left;
    width: 520px;
    padding-top: 15px;
    line-height: 24px;
    p {
      text-align: left;
    }
  }
  .line {
    margin: 0 8px 0 10px;
    color: #c2c2c2;
  }
}
.s-fc4 {
  color: #999;
}
.s-fc3 {
  color: #666;
}
.sep {
  margin-right: 14px;
}
.p-logo {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../common/images/police.png") no-repeat;
  margin-right: 2px;
  background-size: cover;
}
.enter {
  float: right;
  width: 420px;
  margin-top: 33px;
  .mg {
    margin-left: 30px;
  }
}
.unit {
  float: left;
  width: 60px;
  height: 70px;
  color: #666;
}
.logo {
  background: url("../common/images/foot_enter_new.png") 0% 0% / 110px 552px no-repeat;
  background-position: -63px -456.5px;
  display: block;
  width: 50px;
  height: 45px;
  margin: 0 auto;
}

.tt {
  display: inline-block;
  margin: 5px 5px 0px -6px;
  width: 72px;
  height: 14px;
  background: url("../common/images/foot_enter_tt.png") 0% 0% / 180px 139px no-repeat;
  background-position: 0 -108px;
}
.logo1 {
  display: block;
  width: 50px;
  height: 45px;
  margin: 0 auto;
  background: url("../common/images/foot_enter_new.png") 0% 0% / 110px 552px no-repeat;
  background-position: -63px -101px;
}
.tt1 {
  background: url("../common/images/foot_enter_tt.png") 0% 0% / 180px 139px no-repeat;
  background-position: -1px -91px;
  display: inline-block;
  margin: 5px 5px 0px;
  width: 52px;
  height: 14px;
}
.logo2 {
  display: block;
  width: 50px;
  height: 45px;
  margin: 0px auto;
  background: url("../common/images/foot_enter_new.png") 0% 0% / 110px 552px no-repeat;
  background-position: 0 0;
}
.tt2 {
  display: inline-block;
  margin: 5px 5px 0px;
  width: 52px;
  height: 14px;
  background: url("../common/images/foot_enter_tt.png") 0% 0% / 180px 139px no-repeat;
  background-position: 0 0;
}
.logo3 {
  display: block;
  width: 50px;
  height: 45px;
  margin: 0 auto;
  background: url("../common/images/foot_enter_new.png") 0% 0% / 110px 552px no-repeat;
  background-position: -60px -50px;
}
.tt3 {
  display: inline-block;
  margin: 5px 5px 0px;
  width: 52px;
  height: 14px;
  background: url("../common/images/foot_enter_tt.png") 0% 0% / 180px 139px no-repeat;
  background-position: 0 -54px;
}
.logo4 {
  display: block;
  width: 50px;
  height: 45px;
  margin: 0 auto;
  background: url("../common/images/foot_enter_new.png") 0% 0% / 110px 552px no-repeat;
  background-position: 0 -101px;
}
.tt4 {
  display: inline-block;
  margin: 5px 5px 0;
  width: 52px;
  height: 14px;
  background: url("../common/images/foot_enter_tt.png") 0% 0% / 180px 139px no-repeat;
  background-position: -1px -72px;
}
</style>
